<template>
  <div>
    <div class="n-layout-page-header">
      <a-card :bordered="false" title="拖拽"> 常用于卡片，事项，预约，流程，计划等 </a-card>
    </div>

    <a-alert title="花式拖拽演示" type="info" class="mt-3">
      每个卡片，都可以上下拖拽顺序，另外不同卡片，也可以拖拽过去，拖拽过来，都不在话下呢，快试试O(∩_∩)O哈哈~
    </a-alert>

    <div class="mt-3 proCard">
      <a-row :gutter="[16, 16]">
        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
          <a-card
            title="需求池"
            :segmented="{ content: 'hard', footer: 'hard' }"
            size="small"
            :bordered="false"
          >
            <template #header-extra>
              <a-tag type="info">月</a-tag>
            </template>

            <Draggable
              class="draggable-ul"
              animation="300"
              :list="demandList"
              group="people"
              itemKey="name"
            >
              <template #item="{ element }">
                <div class="cursor-move draggable-li">
                  <a-tag color="#2db7f5">需求</a-tag><span class="ml-2">{{ element.name }}</span>
                </div>
              </template>
            </Draggable>
            <a-empty :image="simpleImage" v-if="!demandList.length" class="mx-16" />
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
          <a-card
            title="开发中"
            :segmented="{ content: 'hard', footer: 'hard' }"
            size="small"
            :bordered="false"
          >
            <template #header-extra>
              <a-tag type="info">月</a-tag>
            </template>

            <Draggable
              class="draggable-ul"
              animation="300"
              :list="exploitList"
              group="people"
              itemKey="name"
            >
              <template #item="{ element }">
                <div class="cursor-move draggable-li">
                  <a-tag color="orange">开发中</a-tag><span class="ml-2">{{ element.name }}</span>
                </div>
              </template>
            </Draggable>
            <a-empty :image="simpleImage" v-if="!exploitList.length" class="mx-16" />
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
          <a-card
            title="已完成"
            :segmented="{ content: 'hard', footer: 'hard' }"
            size="small"
            :bordered="false"
          >
            <template #header-extra>
              <a-tag type="info">月</a-tag>
            </template>
            <Draggable
              class="draggable-ul"
              animation="300"
              :list="completeList"
              group="people"
              itemKey="name"
            >
              <template #item="{ element }">
                <div class="cursor-move draggable-li">
                  <a-tag color="green">已完成</a-tag><span class="ml-2">{{ element.name }}</span>
                </div>
              </template>
            </Draggable>
            <a-empty :image="simpleImage" v-if="!completeList.length" class="mx-16" />
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6" :xxl="6">
          <a-card
            title="已验收"
            :segmented="{ content: 'hard', footer: 'hard' }"
            size="small"
            :bordered="false"
          >
            <template #header-extra>
              <a-tag type="info">月</a-tag>
            </template>
            <Draggable
              class="draggable-ul"
              animation="300"
              :list="approvedList"
              group="people"
              itemKey="name"
            >
              <template #item="{ element }">
                <div class="cursor-move draggable-li">
                  <a-tag color="#87d068">已验收</a-tag><span class="ml-2">{{ element.name }}</span>
                </div>
              </template>
            </Draggable>
            <a-empty :image="simpleImage" v-if="!approvedList.length" class="mx-16" />
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import Draggable from 'vuedraggable';
  import { Empty } from '@arco-design/web-vue';

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;

  const demandList = reactive([
    { name: '预约表单页面，能填写预约相关信息', id: 1 },
    { name: '促销活动页面，包含促销广告展示', id: 2 },
    { name: '商品列表，需要一个到货提醒功能', id: 3 },
    { name: '商品需要一个评价功能', id: 4 },
    { name: '商品图片需要提供放大镜', id: 5 },
    { name: '订单需要提供删除到回收站', id: 6 },
    { name: '用户头像上传，需要支持裁剪', id: 7 },
    { name: '据说Vue3.2发布了，setup啥时候支持？', id: 8 },
  ]);

  const exploitList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);

  const completeList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);

  const approvedList = reactive([{ name: '商品图片需要提供放大镜', id: 5 }]);
</script>

<style lang="less" scoped>
  .draggable-ul {
    width: 100%;
    min-height: 40px;
    overflow: hidden;
    margin-top: -16px;

    .draggable-li {
      width: 100%;
      padding: 16px 10px;
      border-bottom: 1px solid var(--border-color);
    }
  }
</style>
